import { Section } from "@/components";
import styles from "./index.module.scss";
/**
 * 伪类 事件监听
 */
const CtrlEvent = () => {
  return (
    <Section className={styles.warpper}>
      <div>
        <span className={styles.stop}>:hover stop</span>
        <div className={styles.animate}>move</div>
      </div>
      <div>
        <div>
          <a
            className="btn"
            href="#stop_one"
            onClick={(e) => {
              return false;
            }}
          >
            :target stop
          </a>
          <a className="btn" href="#2" onClick={(e) => false}>
            :target play
          </a>
        </div>
        <div
          id="stop_one"
          style={{ display: "none" }}
          className={styles.stop_one}
        ></div>
        <div
          id="paly_one"
          style={{ display: "none" }}
          className={styles.play_one}
        ></div>
        <div className={styles.animate}>move</div>
      </div>
      <div>
        <input
          id="stop_two"
          className={styles.stop_two}
          type="radio"
          name="two"
        />
        <input
          id="play_two"
          className={styles.play_two}
          type="radio"
          name="two"
        />
        <div>
          <label htmlFor="stop_two">
            <div className="btn">:checked stop</div>
          </label>
          <label htmlFor="play_two" defaultChecked>
            <div className="btn">:checked play</div>
          </label>
        </div>
        <div className={styles.animate}>move</div>
      </div>
    </Section>
  );
};

export default CtrlEvent;
